<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="author" content="Dzenan Ridjanovic"/>
    <title>MagicBoxes</title>   
    <link rel="stylesheet" href="css/layout.css"/>
    <link rel="stylesheet" href="css/layout2c.css"/>
    <link rel="stylesheet" href="css/link.css"/>
    <link rel="stylesheet" href="css/page.css"/>
  </head>
  
  <body>
    <header>
      <h2>Magic Boxes in Dart: Boxes with Tool Bar</h2>
      <!-- http://dev.opera.com/articles/view/html-5-canvas-the-basics/ -->
    </header>
    
    <section id="main"> 
      <canvas id="canvas" width="630" height="580">
        Canvas is not supported in your browser.
      </canvas>    
      <footer>
        <button id="select"><img src="img/select.png"/></button>
        <button id="box"><img src="img/box.png"/></button>
      </footer>
      <script type="text/javascript" src="MagicBoxes.dart.app.js"></script>
    </section>
    
    <section id="right"> 
      <header>
        <h3>Creating and Moving Boxes</h3>
      </header>
      <p>
        Click the box tool (button), in the tool bar, each time you want to create a box, by clicking on an empty space in the board.
      </p>
      <p>
        To move a non selected box, click the box and keep the mouse down while moving it. 
        A selected box cannot be moved.
      </p>
      <p>
        Click the box to select it. Click again to deselect it. 
        If there are several selected boxes, you may deselect them all by clicking on an empty space in the board.
      </p>
      <p>
        If you want to create several boxes, double-click the box tool to stay on. 
        To return to the select mode double-click the select tool.
      </p>
    </section> 
  </body>
</html>
